import React, { useState } from "react";
import Item1 from './Item1';
import Item2 from './Item2';
import MyContext from "./MyContext";

// 1、创建context对象
const { Provider } = MyContext

function Box() {
    const [num, setNum] = useState(0);
    // 触发
    const increment = () => {
        setNum(num => num + 1);
    }
    const decrement = () => {
        setNum(num => num - 1)
    }
    return (
        <Provider value={{ num, setNum }}>
            <div className='wrapper wrapper1'>
                <h2 className='display-4'>useContext的基本使用</h2>
                <button onClick={increment} className='btn btn-danger'>父组件增加</button>
                <button onClick={decrement} className='ml-3 btn btn-warning'>父组件减少</button>
                <Item1 />
                <Item2 />
            </div>
        </Provider>
    )
}

export default Box;